<template>
  <div class="message">
    <component :is="render()"></component>
  </div>
</template>

<script setup lang="ts">
import type {
  interGroupList,
  interGroupMessageInfo,
  interMessageType,
} from "@b/model/base/type";
import { reactive, h, type VNode } from "vue";

interface prop {
  messages: { [key in interMessageType]?: interGroupList };
  item: interGroupMessageInfo;
}

const { messages, item } = defineProps<prop>();
const cache: { [key: string]: VNode } = reactive({});

const render = () => {
  const it = cache[item.id];
  if (it) return it;
  const p = messages[item.type]?.formatter(item.fullUrl || item.msg) as VNode | Promise<VNode>;
  if (p instanceof Promise) {
    p.then((res) => {
      cache[item.id] = res;
    });
    return h("div");
  } else {
    return p;
  }
};
</script>

<style scoped>
.message {
  word-break: break-all;
  padding: 10px;
  border: 1px solid var(--el-border-color);
  border-radius: 10px;
  max-width: 400px;
}

.self_message .message {
  border-color: var(--el-color-primary-light-3);
  text-align: right;
}
</style>
